<!-- 商品新增 编辑 -->
<template>
    <el-dialog v-model="dialogFormVisible" :title="commodityForm.id ? '修改商品内容' : '新增商品'" width="40%">
        <el-form :model="commodityForm" :rules="rules" ref="commodityForms">
            <el-form-item prop="productImg" label="商品图片" :label-width="formLabelWidth">
                <!-- 上传图片 -->
                <!-- http://134.175.252.64:8080/file/upload -->
                <!-- /api/file/upload -->
                <el-upload class="avatar-uploader" action="/api/file/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="commodityForm.productImg" :src="commodityForm.productImg" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <UploadFilled />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item prop="productName" label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="commodityForm.productName" autocomplete="off" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item prop="price" label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="commodityForm.price" autocomplete="off" placeholder="请输入商品价格" />
            </el-form-item>
            <el-form-item prop="stock" label="商品库存" :label-width="formLabelWidth">
                <el-input v-model="commodityForm.stock" autocomplete="off" placeholder="请输入商品库存" />
            </el-form-item>
            <el-form-item prop="description" label="商品描述" :label-width="formLabelWidth">
                <el-input v-model="commodityForm.description" :rows="4" type="textarea" placeholder="请输入商品描述" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import $bus from '../../../bus'
import { Commodity } from '../../../api/info/commodity/type';
import type { UploadProps } from 'element-plus'
let $emit = defineEmits(['operateCommodityInfo'])
defineProps(['paginationData'])
let commodityForms = ref()
let formLabelWidth = ref<String>('100px')
let dialogFormVisible = ref<Boolean>(false)
// 收集对话框中的数据
let commodityForm = reactive<Commodity>({
    productImg: '',
    productName: '',
    description: '',
    price: '',
    stock: ''
})

onMounted(() => {
    $bus.on('showDialog', (obj: any) => {
        //  清空上一次文本框中的内容
        commodityForm.id = ''
        commodityForm.price = ''
        commodityForm.stock = ''
        commodityForm.productImg = ''
        commodityForm.productName = ''
        commodityForm.description = ''

        // 显示对话框
        dialogFormVisible.value = obj.isShow

        // 赋值
        if (obj.row) {
            Object.assign(commodityForm, obj.row)
        }
        // 清空校验结果
        commodityForms.value?.clearValidate('productImg')
        commodityForms.value?.clearValidate('productName')
        commodityForms.value?.clearValidate('description')
        commodityForms.value?.clearValidate('price')
        commodityForms.value?.clearValidate('stock')

    })
})

// 表单校验
const rules = {
    productImg: [{ required: true, message: '商品图片不能为空', trigger: 'change' }],
    productName: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
    description: [{ required: true, message: '商品描述不能为空', trigger: 'blur' }],
    price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
    stock: [{ required: true, message: '商品库存不能为空', trigger: 'blur' }]
}

// 对话框确认按钮回调
const submit = async () => {
    await commodityForms.value.validate();
    // 表单校验通过
    $emit('operateCommodityInfo', commodityForm)
    // 关闭对话框
    dialogFormVisible.value = false
}
// 图片上传成功回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response
) => {
    commodityForm.productImg = response.data.url
    commodityForms.value.clearValidate('productImg')
}
// 图片上传之前触发的钩子 可以限制上传的格式 大小 文件类型
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif ') {
        if (rawFile.size / 1024 / 1024 < 2) {
            return true
        } else {
            ElMessage.error('上传图片的大小不能超过 2MB!')
            return false
        }

    } else {
        ElMessage.error('上传文件的格式必须是 jpeg / png / gif')
        return false
    }
}
</script>

<style lang="scss" scoped>
.el-form {
    padding: 20px 30px;
}

.avatar-uploader .avatar {
    width: 130px;
    height: 80px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 60px;
    text-align: center;
}
</style>